<template>
	<view>
		<!-- <navbar title='用户详情' :isBack='true' ></navbar> -->
		<view class="header_img">
			<image src="http://www.auok.ltd/background.jpg" mode=""></image>
		</view>

		<view class="main" >
			<view class="avatar ">
				<image :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="nickName">
				<view class="beizhu">
					{{userInfo.nickName || userInfo.registerMail}}
				</view>
				<view class="nick">

				</view>
			</view>
			<view class="item-wrap">
				<view class="item">
					<view class="left">
						<view>
							<u-icon name="edit-pen"></u-icon>
						</view>
						<view class="text">物换星移几度秋</view>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view>
							<u-icon name="grid"></u-icon>
						</view>
						<view class="text">TA的动态</view>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<!-- 查看id为{{id}}的用户 -->
				<block v-if="!pRoomIn">
					<button type="" @tap="addFriend" v-if="!isfriend">添加好友</button>
					<button type="" v-else @click="sendMsg">发送消息</button>
				</block>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				isfriend: false,
				userInfo: {},
				pRoomIn:false
			};
		},
		onLoad(e) {
			console.log(JSON.parse(e.info))
			this.userInfo = JSON.parse(e.info)
			console.log(e)
			if(e.pRoomIn){
				this.pRoomIn = true
			}
			this.isFriend()
			// this.getUserInfo()
		},
		methods: {
			sendMsg(){
				uni.navigateTo({
					url:`/pages/privateChatRoom/privateChatRoom?receiverId=${this.userInfo.id}`
				})
			},
			addFriend() {
				console.log(this.userInfo)
				this.$api.add_friend({
					id: this.userInfo.id
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						position: "top",
						duration: 1500
					})
				})
			},
			isFriend() {
				this.$api.isFriend({
					id: this.userInfo.id
				}).then(res => {
					console.log('是否是好友', res)
					this.isfriend = res.isFriend

				})
			},
			getUserInfo() {
				this.$api.searchById(`?id=${this.id}`).then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 50rpx 100rpx;
		background-image: $bgImage;
		color: #FFFFFF;
	}

	.item-wrap {
		// border: 1px solid;
		// margin-top: 120rpx;
		padding-top: 120rpx;

		.item {
			display: flex;
			padding: 20rpx 0;
			font-size: 34rpx;
			margin: 10rpx 0;
			justify-content: space-between;

			u-icon {
				font-size: 100rpx;
				color: #999999;
			}

			.left {
				display: flex;
				.text{
					color: #999999;
				}

				view {
					margin-right: 20rpx;
				}

			}
		}
	}

	.main {
		width: 92%;
		margin: 0 auto;
		position: relative;
		// border: 2px solid;
		// min-height: 1000rpx;
	}

	.header_img {
		// border: 1px solid;
		height: 500rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.avatar {
		border: 2px solid #FFFFFF;
		height: 170rpx;
		width: 170rpx;
		border-radius: 50%;
		position: absolute;
		top: 0;
		margin-top: -85rpx;
		overflow: hidden;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.nickName {
		// border: 1px solid red;
		height: 120rpx;
		width: 450rpx;
		position: absolute;
		top: 0;
		left: 200rpx;
		margin-top: -120rpx;
		color: white;
		padding: 5rpx;

		.beizhu {
			font-size: 40rpx;
			padding-bottom: 5rpx;
		}

		.nick {
			font-size: 24rpx;
		}
	}
</style>
